<script>

import { adminList,addAdmin,upadateAdmin,deleteAdmin } from '@/api/user.js'
import { routes } from '@/router/index.js'
import { ElMessage } from 'element-plus'

export default{
  // name:"managerlist",
   data() {
    return {
      tableData:[],
      currentPage:1,
      // 是否打开抽屉效果
      drawer:false,
      // 路由信息
      menus:routes[0].children,
      // 管理员数据
      formData:{
        adminname:'',
        password:'',
        role:'',
        checkedKeys:''
      },
      // 默认选中项
      defaultCheckedKeys:[],
      interfaceType:'10086'
    }

   },
   methods: {
    addClick(){
      this.interfaceType='10086'
      this.drawer =true
    },
    formatCheckedKeys(){
      const list =this.$refs.treeRef.getCheckedNodes(true)
      // 用来防父级路由的label用的
      const tempList =[]
      const result =[]
      list.forEach(item =>{
      const parent=  this.menus.find(mitem =>{
          return mitem.children.some(child => child.label == item.label)
        })
        // console.log(parent);
        if (tempList.includes(parent.label)) {
          result.find(item => item.label == parent.label).children.push(item)
        }else {
          tempList.push(parent.label)
          result.push({
            label:parent.label,
            path:parent.path,
            children:[item]
          })
        }
        // 将路由权限添加到formDate 中
        this.formData.checkedKeys =result
      })
    },
    add(){
      // 将管理员数据发送到服务器
      //1 收集数据
      // 获取路由的权限路由
      
      this.formatCheckedKeys(this.formData)
      //2 将数据发送给服务器
      // console.log(this.formData);
      this.formData.role =this.formData.role == '管理员' ? '1' : '2'
      // 将数据添加到服务器中
      addAdmin(this.formData).then( res =>{
        // console.log(res);
        if(res.code == '200') {
          // 成功
          ElMessage.success(res.message)
          this.drawer =false
              // 获取管理员列表
         adminList().then(res =>{
             //  console.log(res);
          this.tableData =res.data
        })
        }else {
          ElMessage.error(res.message)
        }
        
      })


    },
    editClick(row){
      this.interfaceType='10010'
      // 打开抽屉
      this.drawer =true   
      // 获取当前的行的数据
      // console.log(row);
      // this.formData =row
      this.formData.adminname =row.adminname
      this.formData.password = ''
      this.formData.role =row.role == 1 ? '管理员' : '超级管理员'
      const checkedKeys =[]
      row.checkedKeys.forEach(parent =>{
        parent.children.forEach(item => {
          checkedKeys.push(item.path)
        })
      })
      this.defaultCheckedKeys = checkedKeys
    },
    close(){
      this.formData ={}
      this.defaultCheckedKeys = []
      if (this.$refs.treeRef) {
        this.$refs.treeRef.setCheckedKeys([])
      }
    },
    update(){
      // 先获取表单数据
      // console.log(this.formData);
      if (this.formData.adminname == '' || this.formData.password =='') {
        ElMessage.error('管理员名称和密码不能为空')
        return
      }
      this.formData.role= this.formData.role =='管理员' ? '1' : '2'
      // 获取当前用户选中的权限
       this.formatCheckedKeys()
       // 提交信息
       upadateAdmin(this.formData).then(res => {
        // console.log(res);
        this.drawer =false
              // 获取管理员列表
         adminList().then(res =>{
             //  console.log(res);
          this.tableData =res.data
       })
      })
    },
    deleteClick(row){
      deleteAdmin({adminid: row.adminid}).then(res =>{
        if (res.code == 200) {
          // 重新请求数据
          // 获取管理员列表
        adminList().then(res =>{
             //  console.log(res);
          this.tableData =res.data
       })
        }else {
          ElMessage.error('删除失败！！！')
        }

      })
    }
   },
   mounted() {
    // 获取管理员列表
    adminList().then(res =>{
      //  console.log(res);
       this.tableData =res.data
    })
   },
   computed:{
       computedTableData(){
        return this.tableData.slice((this.currentPage - 1) * 10, (this.currentPage - 1) * 10 + 10)
       }
   }
}
</script>

<template>
  <div>
    <div class="header">
     管理员列表
     <el-button type="success" @click="addClick">添加管理员</el-button>
    </div>

    <el-table :data="computedTableData" style="width: 100%">
      <!-- type="index" 标记当前为索引 -->
    <el-table-column type="index" :index="(currentPage -1) * 10 + 1" label="序号" width="80" />
    <el-table-column prop="adminname" label="管理员名称" width="180" />
    <el-table-column prop="address" label="管理员权限">
      <template #default="scope"> 
        <!-- <div>
          {{ scope.row.role ==1 ? '管理员' : '超级管理员' }} -->
          <el-tag :type="scope.row.role == 1 ? '' : 'danger' ">{{ scope.row.role ==1 ? '管理员' : '超级管理员' }}</el-tag>
        <!-- </div> -->
      </template>
    </el-table-column>
    <el-table-column prop="address" label="操作">
      <template #default="scope"> 
        <el-button @click="editClick(scope.row)" size="small" type="primary">编辑</el-button>
        <el-button size="small" type="danger" @click="deleteClick(scope.row)">删除</el-button>
      </template>
    </el-table-column>
    </el-table>
    <!-- 用做分页显示 -->
    <el-pagination background v-model:current-page="currentPage" layout="prev, pager, next" :total="tableData.length" />
    <!-- 抽屉显示 -->
    <el-drawer @close="close" v-model="drawer">
        <template #header>
          <h4>{{ interfaceType == '10086' ? '添加管理员' : '编辑管理员' }}</h4>
        </template>
      <el-form label-width="120px">
      <el-form-item label="管理员账号">
       <el-input placeholder="请输入管理员账号" v-model="formData.adminname" />
     </el-form-item>
     <el-form-item label="管理员密码">
       <el-input placeholder="请输入管理员密码" v-model="formData.password" />
     </el-form-item>
     <el-form-item label="管理员角色">
      <el-select  placeholder="请选者对应的角色" v-model="formData.role">
        <el-option label="管理员" value="管理员" />
        <el-option label="超级管理员" value="超级管理员" />
      </el-select>
     </el-form-item>
     <el-form-item>
       <el-tree show-checkbox ref="treeRef" :data="menus" node-key="path" :default-expand-all="true" :default-checked-keys="defaultCheckedKeys" />
     </el-form-item>
    </el-form>
    <el-button v-if="interfaceType== '10086'" show-checkbox @click="add" type="primary" >添加</el-button>
    <el-button v-else show-checkbox  type="primary" @click="update">修改</el-button>
  </el-drawer>
  </div>
</template>

<style lang="scss" scoped>
.header{
  margin-bottom: 16px;
}
</style>